<template>
  <view class="container-doudouCard">
    <header @click="$goPath(1)">
      <image src='/static/images/right-white.png' mode='aspectFit|aspectFill|widthFix' alt="" />
      <view>兜兜卡库</view>
    </header>

    <section>
      <view class="sect-box">
        <view class='sect-card'>
          <view class="card-img">
            <view class='sect-card-top'>
              <view>兜兜卡(300元/张)</view>
              <view class="text">{{ ddkList.length || 0 }}</view>
            </view>
            <view class='sect-card-bottom' @click="$goPath(2, '/pagesA/pocketShop/mine/bills?billsType=ddk')">账单</view>
          </view>
        </view>

        <view class='sect-content'>
          <view class='sect-list-title'>兜兜卡情况:</view>
          <view class="refresh" @click="onRefresh()">刷新</view>
        </view>

        <view class='sect-list'>
          <view class='sect-list-item sect-list-item-head'>
            <view>手机号</view>
            <view>方式</view>
            <view>数量</view>
            <view>时间</view>
            <view>操作</view>
          </view>

          <view class='sect-list-item' v-for="(item, index) in ddkBillList" :key="index">
            <view>{{ item.phone || '系统操作' }}</view>
            <view>{{ item.remark }}</view>
            <view>{{ item.counts }}</view>
            <view>{{ item.time }}</view>
            <view class='sect-item-status'>
              <template v-if="item.status == 0">
                <template v-if="userInfo.type == 0">
                  <text @click="handleRecovery(item)" style="color: #EA5F5F">确认回收</text>
                </template>
                <template v-else>待确认</template>
              </template>

              <template v-else>
                <template v-if="userInfo.type == 1 && !item.evidence && item.remark == '回收'">上传凭证</template>
                <template v-else>已完成</template>
              </template>
            </view>
          </view>
        </view>

        <view class='foot-btns' v-if="userInfo.type == 1">
          <view class="btns">
            <view @click="handleOperate('转让')">转让</view>
            <view @click="handleOperate('回收')">收回</view>
          </view>
        </view>

      </view>
    </section>

    <u-overlay :show="visible" @click="visible = false">
      <view class="modal-ddkOprtate">
        <view @click.stop>
          <view class='modal-ddkOprtate-title'> {{ btnType }}兜兜卡 </view>

          <view class='modal-ddkOprtate-search'>
            <text>手机号:</text>
            <input type="number" placeholder='请输入手机号' v-model="searcaPhone" />
            <view @click="onSearch()">查询</view>
          </view>

          <view class='modal-ddkOprtate-searchInfo' v-if="searchInfo.username">
            <view>用户昵称：{{ searchInfo.username }}</view>
            <view>账户剩余兜兜卡数量：{{ searchInfo.cardCount }}</view>
          </view>

          <view class='modal-ddkOprtate-tabs'>
            <view :class="ddkIndex == item.id ? 'tabs-item tabs-item-active' : 'tabs-item'"
              v-for="(item, index) in ddkTabs" :key="item.id" @click="handleCheckDDk(item.id)">
              <template v-if="item.num != '其它'">
                <view><text>{{ item.num }}</text>张</view>
                <view>售价{{ item.money }}元</view>
              </template>
              <template v-else>
                <view>其它数量</view>
                <view>
                  <input type='number' style="text-align: center;" v-model="ddkInputValue" placeholder='请输入整数'
                    onChange={onInputDdkValue} />
                </view>
              </template>
            </view>
          </view>

          <view class='modal-ddkOprtate-info'>每张兜兜卡社区店回收价294元</view>
          <view class='modal-ddkOprtate-btns'>
            <view>
              <view @click="handleCancel()">取消</view>
              <view @click="handleOk()">确定</view>
            </view>
          </view>
        </view>
      </view>
    </u-overlay>

    <u-modal :show="confirmVisible" showCancelButton :title="btnType == '转让' ? '确认赠送兜兜卡' : '确认回收兜兜卡'"
      :content="btnType == '转让' ? `确认赠送${searchInfo.phone}用户${this.cardCount}张兜兜卡？确认后兜兜卡将直接转入对方账户` : `确认回收${searchInfo.phone}用户${this.cardCount}张兜兜卡？确认后将发送信息给${searchInfo.phone}用户，用户确认后，兜兜卡转入账户！`"
      closeOnClickOverlay @confirm="confirm" @cancel="confirmVisible = false"></u-modal>
  </view>
</template>
<script>
import { getUserInfo } from '@/common/auth';
export default {
  data() {
    return {
      ddkList: [],
      ddkBillList: [],
      userInfo: {},
      searcaPhone: '',
      searchInfo: {},
      ddkIndex: 0,
      cardCount: 0,
      btnType: '转让',
      visible: false,
      ddkInputValue: '',
      ddkTabs: [
        { id: 0, num: 1, money: 300 },
        { id: 1, num: 3, money: 900 },
        { id: 2, num: '其它' },
      ],
      confirmVisible: false,
    }
  },
  onLoad() {
    this.userInfo = getUserInfo()
  },

  onShow() {
    this.init();
  },
  methods: {

    init() {
      this.getDdk(this.userInfo);
      this.getDdkBillList(this.userInfo);
    },

    //获取兜兜卡列表
    async getDdk(userInfo) {
      let result = await this.$request.cardFindByList({ userId: userInfo.userId })
      this.ddkList = result.data;
    },

    //获取兜兜卡流水
    async getDdkBillList(userInfo) {
      await this.$request.cardBillFlow({ userId: userInfo.userId }).then(res => {
        if (res.code == 200 && res.isSuccess) {
          res.data?.map(item => {
            if (item.phone) {
              item.phone = `${item.phone?.substring(0, 3)}****${item.phone?.substring(item.phone.length - 4)}`;
            }
            item.time = item.createTime?.substring(0, 10)
          });
          this.ddkBillList = res.data;
        }
      });
    },
    //刷新
    onRefresh() {
      uni.showToast({
        title: '刷新中',
        icon: 'loading'
      });
      this.init();
    },

    //赠送兜兜卡
    handleOperate(type) {
      this.btnType = type;
      this.visible = true;
    },

    //选择兜兜卡
    handleCheckDDk(id) {
      this.ddkIndex = id;
    },

    //确认回收
    handleRecovery(records) {
      this.$request.cardBillConfirm({ cardBillId: records.id }).then(res => {
        if (res.code == 200 && res.isSuccess) {
          this.init();
          uni.showToast({ title: '已回收', icon: 'success' });
        }
      });
    },

    //根据手机号获取用户多少张兜兜卡
    onSearch() {
      let regex = /^((\+)?86|((\+)?86)?)0?1[3456789]\d{9}$/;
      if (!regex.test(this.searcaPhone)) return this.$toast('请输入正确的手机号')
      this.$request.informationByPhone({ phone: this.searcaPhone }).then(res => {
        if (res.code == 200 && res.isSuccess) {
          this.searchInfo = res.data;
        } else {
          this.$toast(res.msg)
        }
      });
    },

    handleCancel() {
      this.visible = false;
      this.onClearData();
    },

    //置空数据
    onClearData() {
      this.ddkInputValue = '';
      this.ddkIndex = 0;
      this.searchInfo = {};
    },

    //确认赠送/回收
    handleOk() {
      const { searchInfo, btnType, ddkIndex, ddkTabs, ddkInputValue, userInfo } = this;
      if (JSON.stringify(searchInfo) === "{}") {
        uni.showToast({ title: `请先搜索被${btnType}用户`, icon: 'none' });
        return;
      }

      if (ddkInputValue > searchInfo.cardCount && btnType == '回收') {
        uni.showToast({ title: '被收回者兜兜卡数量不足', icon: 'none' });
        return;
      }

      this.cardCount = ddkIndex != 2 ? ddkTabs[ddkIndex].num : ddkInputValue;
      this.visible = false;
      this.confirmVisible = true;
    },

    confirm() {
      let cadIdList = [];
      const param = {
        count: this.cardCount,
        currentUserId: this.userInfo.userId,
        userId: this.searchInfo.userId,
      }
      if (this.btnType == '转让') {
        for (let i = 0; i < this.cardCount; i++) {
          cadIdList.push(this.ddkList[i].id);
        }
        param.cardIdList = cadIdList;

        this.$request.cardSendCard(param).then(res => {
          if (res.code == 200 && res.isSuccess) {
            this.$toast('赠送成功!')

            this.confirmVisible = false
            this.init();
            this.handleCancel();
          } else {
            this.$toast(res.msg)

          }
        });

      } else {
        for (let i = 0; i < this.cardCount; i++) {
          cadIdList.push(this.searchInfo.cardIdList[i]);
        }
        param.cardIdList = cadIdList;

        this.$request.cardRecycleCard(param).then(res => {
          if (res.code == 200 && res.isSuccess) {
            this.$toast('回收成功,等待用户确认!')

            this.init();
            this.handleCancel();
            this.confirmVisible = false
          } else {
            this.$toast(res.msg)
          }
        });
      }
    },
  },



}
</script>
<style scoped>
uni-page-body {
  overflow: hidden;
}

.container-doudouCard {
  width: 100%;
  height: 100vh;
  font-size: 28rpx;
  font-family: 'PingFang SC-Medium';
  background-color: #FED14E;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

header {
  width: 100%;
  padding: 120rpx 24rpx 60rpx;
  border-radius: 0 0 40rpx 40rpx;
  box-sizing: border-box;
  color: #fff;
  background-color: #32B499;
  background-image: url('https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/homeTopIcon.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  font-size: 36rpx;
  font-family: 'PingFang SC-Bold';
  display: flex;
  align-items: center;
}

header>image {
  width: 16rpx;
  height: 28rpx;
  display: block;
  margin-right: 12rpx;
}

section {
  height: 100%;
  position: relative;
  top: -50rpx;
  padding: 0 24rpx;
  box-sizing: border-box;
  overflow-y: auto;
}

.sect-box {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 40rpx;
  padding: 24rpx;
  box-sizing: border-box;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.sect-card {
  width: 100%;
  height: 240rpx;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  background-color: #32B499;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sect-card>.card-img {
  width: 420rpx;
  height: 100%;
  background-image: url('https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/icon-needOnce.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #fff;
}

.sect-card .sect-card-top {
  height: 144rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: 2rpx solid rgba(241, 241, 241, 0.4);
  font-family: 'PingFang SC-Medium';
}

.sect-card .sect-card-top view:last-child {
  font-size: 24px;
  font-family: 'DIN-Bold';
}

.sect-card .sect-card-bottom {
  height: 3.15rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sect-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.sect-content>view:last-child {
  width: 60px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #32B499;
  border-radius: 20px;
  font-size: 12px;
}

.sect-list {
  flex: 1;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow-y: scroll;
}

.container-doudouCard .sect-list .sect-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(241, 241, 241, 0.8);
  padding: 14px 12px;
  box-sizing: border-box;
  font-size: 14px;
  font-family: 'PingFang SC-Regular';
  color: #666;
}

.container-doudouCard .sect-list .sect-list-item-head {
  font-size: 14px;
  color: #333;
}

.container-doudouCard .sect-list .sect-list-item-head view {
  font-family: 'PingFang SC-Medium' !important;
}

.container-doudouCard .sect-list .sect-list-item>view {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'PingFang SC-Regular';
}

.container-doudouCard .sect-list .sect-list-item>view:first-child {
  width: 75px;
  font-family: 'DIN-Regular';
}

.container-doudouCard .sect-list .sect-list-item>view:nth-child(2) {
  width: 28px;
}

.container-doudouCard .sect-list .sect-list-item>view:nth-child(3) {
  width: 28px;
  font-family: 'DIN-Regular';
}

.container-doudouCard .sect-list .sect-list-item>view:nth-child(4) {
  width: 74px;
  font-family: 'DIN-Regular';
}

.container-doudouCard .sect-list .sect-list-item>view:last-child {
  width: 56px;
}

.foot-btns {
  background-color: #fff;
  display: flex;
  justify-content: center;
  padding: 12px 0;
}

.foot-btns>view {
  display: flex;
  background-color: #32B499;
  width: 90%;
  height: 40px;
  background: #32B499;
  border-radius: 20px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'PingFang SC-Medium';
  padding: 10px 0;
  box-sizing: border-box;
}

.foot-btns>view view {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.foot-btns>view view:first-child {
  border-right: 1px solid #fff;
}

.modal-ddkOprtate {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-ddkOprtate>view {
  width: 85%;
  height: auto;
  font-size: 14px;
  color: #333;
  border-radius: 10px;
  padding: 12px 24px;
  box-sizing: border-box;
  background-color: #fff;
}

.modal-ddkOprtate-title {
  text-align: center;
  font-size: 16px;
  font-family: 'PingFang SC-Bold';
  margin-bottom: 12px;
}

.modal-ddkOprtate-search {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.modal-ddkOprtate-search>text:first-child {
  width: 60px;
}

.modal-ddkOprtate-search>input {
  flex: 1;
  height: 32px;
  padding-left: 8px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid #EFEFEF;
}

.modal-ddkOprtate-search>view {
  width: 60px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #32B499;
  border-radius: 20px;
  color: #fff;
  margin-left: 12px;
}

.modal-ddkOprtate-searchInfo {
  margin-bottom: 12px;
}

.modal-ddkOprtate-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.modal-ddkOprtate-tabs .tabs-item {
  width: 130px;
  height: 80px;
  background: #FFFFFF;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #E5E5E5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.modal-ddkOprtate-tabs .tabs-item>view {
  font-size: 14px;
}

.modal-ddkOprtate-tabs .tabs-item>view text {
  font-family: 'DIN-Bold';
  font-size: 20px;
}

.modal-ddkOprtate-tabs .tabs-item-active {
  border: 1px solid #32B499;
  color: #32B499;
}

.modal-ddkOprtate-info {
  color: #999999;
  margin-bottom: 12px;
}

.modal-ddkOprtate-btns {
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-ddkOprtate-btns>view {
  width: 100%;
  height: 40px;
  background: #32B499;
  border-radius: 20px 20px 20px 20px;
  color: #fff;
  display: flex;
  align-items: center;
}

.modal-ddkOprtate-btns>view>view {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-ddkOprtate-btns>view>view:first-child {
  border-right: 1px solid #fff;
}
</style>
